<script setup lang="ts">
import { TypeItOptions } from '@/components/TypeIt';
import AllowJS from './components/allow-js.vue';

const options: TypeItOptions = {
  strings: ['无边落木萧萧下', '不尽长江滚滚来'],
};
</script>

<template>
  <AppPage>
    <PageCard title="TypeIt打字机效果">
      <TypeIt :options="options" />
    </PageCard>
    <PageCard title="文字滚动公告">
      <!-- 基础用法 -->
      <TextScroll text="这是一条基础的滚动公告，默认向左滚动。" typewriter />
      <!-- 使用不同的类型 -->
      <TextScroll type="success" text="这是一条成功类型的滚动公告" typewriter />
      <TextScroll type="warning" text="这是一条警告类型的滚动公告" />
      <TextScroll type="danger" text="这是一条危险类型的滚动公告" />
      <TextScroll type="info" text="这是一条信息类型的滚动公告" />
      <!-- 自定义速度和方向 -->
      <TextScroll text="这是一条速度较慢、向右滚动的公告" :speed="30" direction="right" showClose />
    </PageCard>

    <AllowJS />
  </AppPage>
</template>

<style lang="scss" scoped>
.custom {
  /* 汉字的样式 */
  :deep(.py-chinese-item) {
    color: #409eff;
  }

  /* 拼音的样式 */
  :deep(.py-pinyin-item) {
    color: #f56c6c;
  }
}
</style>
